<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datare">
                  <div class="ra">地址管理</div>
                  <div class="forms">
                    <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
                      <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name" style="width: 100%;"></el-input>
                      </el-form-item>
                      <el-form-item label="电话" prop="posin">
                        <el-input v-model="ruleForm.posin" style="width: 100%;"></el-input>
                      </el-form-item>

                      <el-form-item label="邮编" prop="bian">
                        <el-input v-model="ruleForm.bian" style="width: 100%;"></el-input>
                      </el-form-item>

                      <el-form-item label="地址信息" prop="selected">
                        <el-cascader size="large"
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange">
                        </el-cascader>
                      </el-form-item>

                      <!-- <el-form-item label="是否默认地址">
                          <el-select v-model="ruleForm.complex" placeholder="是否默认地址">
                              <el-option label="否" :value="0"></el-option>
                              <el-option label="是" :value="1"></el-option>
                            </el-select>
                      </el-form-item> -->

                      <el-form-item label="详细地址" prop="desc">
                        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                      </el-form-item>
                      <el-form-item style="margin-top: 16px;margin-left: 358px;">
                        <el-button type="primary" @click="submitForm">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div class="dzlist">
                    <el-table
                      :data="tableData"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="consigneeName"
                        label="姓名"
                        width="90">
                      </el-table-column>
                      <el-table-column
                        prop="phoneNumber"
                        label="电话"
                        width="140">
                      </el-table-column>
                      <el-table-column
                        prop="province,city,region,detailAddress"
                        label="地址"
                        width='320'
                        >
                        <template slot-scope="scope">
                            {{scope.row.province}}
                            {{scope.row.city}}
                            {{scope.row.region}}
                            {{scope.row.detailAddress}}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="postCode"
                        label="邮编"
                        width='98'
                        >
                      </el-table-column>
                      <el-table-column
                        fixed="right"
                        label="操作"
                        width="130">
                        <template slot-scope="scope">

                          <el-button @click='onEditMoney(scope.row)' type="text" size="small">编辑</el-button>
                          <el-button  @click="handleClick(scope.row)" type="text" size="small">默认地址</el-button>

                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
            <el-dialog title="修改地址" :visible.sync="EditAddress">
              <el-form >
                <el-form-item label="收件人" :label-width="formLabelWidth">
                  <el-input v-model="listdetaxg.consigneeName" autocomplete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                  <el-input v-model="listdetaxg.phoneNumber" autocomplete="off" style="width: 80%;"></el-input>
                </el-form-item>
               <el-form-item label="邮政编码" :label-width="formLabelWidth">
                  <el-input v-model="listdetaxg.postCode" autocomplete="off" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                  <el-input type="textarea" v-model="listdetaxg.detailAddress" style="width: 60%;"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="EditAddress = false">取 消</el-button>
                <el-button type="primary" @click="EditAddress = false">确 定</el-button>
              </div>
            </el-dialog>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
import axios from 'axios'
import qs from 'qs'
import { regionData,CodeToText  } from 'element-china-area-data'
export default {
    components: {
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
        ruleForm: {
          name: '',
          posin:'',
          bian:'',
          region: '',
          desc: '',
          // complex:"",
        },
        // form1: {
        //   name: '',
        //   date1: '',
        //   date2: '',
        //   desc: ''
        // },
        formLabelWidth: '100px',
        EditAddress: false,
        usernameid:"",
        selectedOptions: [],
        listdetaxg:[],
        options: regionData,
        elcascader:'',
        rules: {
          name: [
            { required: true, message: '请输入您的姓名', trigger: 'blur' }
          ],
          posin : [
            { required: true, message: '请输入您的电话', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入您的详细地址', trigger: 'blur' }
          ],
          selected: [
            { required: true, message: '请输入地址区域', trigger: 'blur' }
          ],
        },
        tableData: []
        };
    },
    mounted() {
      let nameid = localStorage.name
      this.usernameid = nameid
      this.datalist()
    },
    methods: {
      datalist() {
        let what = this
        axios({
          method: 'get',
          url:'http://47.105.66.232:8066/base/address/findByuserid',
          params: {
            userId: what.usernameid
          } })
        .then(res=> {
          this.tableData = res.data.body
          console.log(res)
        })
      },
      handleChange (value) {
        let cs = CodeToText[value[0]]
        let sz = CodeToText[value[1]]
        let dq = CodeToText[value[2]]
        let valone = `${cs}/${sz}/${dq}`
        this.elcascader = valone
        console.log(value)
        console.log(valone)
      },
      submitForm(){
        let data = {
          userId:this.usernameid,
          consigneeName: this.ruleForm.name,
          phoneNumber:this.ruleForm.posin,
          defaultStatus:0,
          postCode:'000000',
          address:this.elcascader,
          detailAddress:this.ruleForm.desc,
        }
        axios({
          method: 'post',
          url:'http://47.105.66.232:8066/base/address/addUserAddress',
          data: qs.stringify(data)})
        .then(res=> {
          console.log(res)
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleClick(val) {
        console.log(val)
      },
      onEditMoney(val) {
        this.listdetaxg = val
        this.EditAddress = true
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.app  /deep/ .el-textarea {
  width: 290px;
}
.demo-ruleForm {
  margin-top: 20px;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}
.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.datare .forms {
  border-top: 1px solid #bdbdbd;
  margin: 25px auto;

}
.dzlist {
  width: 800px;
  margin: 0 auto;
}
</style>
